<template>
  <el-dialog
    v-dialogDrag
    top="1vh"
    :before-close="dialogClose"
    :title="'预算明细表'"
    width="95%"
    :visible="isShow"
    append-to-body
  >
    <!--//!  form -->
    <div class="dialog-container">
      <el-tabs v-model="activeTap" @tab-click="changeTap">
        <el-tab-pane
          v-for="(item, index) in budgetSchedule"
          :key="index"
          :label="item.title"
          :name="index + ''"
        />
      </el-tabs>
      <div ref="table-content" class="table-content">
        <DynamicTable
          v-if="tableHeight"
          ref="DynamicTable"
          :height="tableHeight + ''"
          :fixed-key-left="[]"
          :table-header="columnList"
          :table-data="tableData"
          :table-loading="tableLoading"
          is-border
        />
      </div>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
// import {
//   Message
// } from 'element-ui';
import DynamicTable from './DynamicTables';
import _ from 'lodash';
import {
  budgetSchedule,
  getTableInfo
} from '@/views/reportCenter/stateData';

export default {
  components: {
    DynamicTable
  },

  props: {
    outColunms: {
      type: Array,
      default: () => []
    },
    isShow: {
      type: Boolean,
      default: false
    },
    uploading: {
      type: Boolean,
      default: false
    },
    rowNow: {
      type: Object,
      default: () => {}
    },
    getTableInfo: { // 外面的请求数据
      type: Object,
      default: () => {}
    },
    filterList: {
      type: Array,
      default: () => []
    },
    datePicker: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      budgetSchedule,
      activeTap: 0,
      columnList: [],
      tableData: [],
      tableHeader: [],
      tableHeight: 0,
      tableLoading: false
    };
  },
  watch: {
    isShow: {
      handler: function(v) {
        if (v) {
          this.initDialog();
          setTimeout(() => {
            this.tableHeight = this.$refs['table-content'].offsetHeight - 10;
          });
        } else {
          this.columnList = [];
          this.tableData = [];
          this.tableHeader = [];
        }
      }
    }
  },
  methods: {
    changeTap() {
      this.initDialog();
    },

    dialogClose() {
      this.$emit('dialogClose');
    },

    collectObjectArrKey(list, key) {
      return list.reduce((prev, curr) => {
        prev.push(curr[key]);
        return prev;
      }, []);
    },

    // 设置过滤字段
    filterListReg(list) {
      // list 外面的行数据  outColunms 外面列数据
      const listCopy = _.cloneDeep(list);
      const outColunms = this.collectObjectArrKey(this.columnList, 'value');
      const filter = listCopy.filter(item => outColunms.includes(item.col));
      filter.forEach(item => {
        const valueArr = item.value.split('$');
        if (valueArr.length > 1) {
          item.symbol = 'ct';
        }

        item.value = valueArr[0];
      });
      return filter;
    },

    // 获取表数据
    initDialog() {
      const info = { ...budgetSchedule[this.activeTap] };
      const tableDataInfo = this.getTableInfo; // 外面的请求信息
      info.bodyUrl = tableDataInfo.bodyUrl;
      info.headUrl = tableDataInfo.headUrl;
      this.tableLoading = true;
      getTableInfo(info, 'head').then(({ columnList, headerList }) => {
        this.tableHeader = headerList;
        this.columnList = columnList;
        const filterList = this.filterListReg(this.filterList);

        const bodyRequest = {
          columnList,
          headerList,
          moneyType: '1',
          month: ((new Date(this.datePicker).getMonth() + 1) + '').padStart(2, '0'),
          orderBy: '',
          pageIndex: '0',
          pageSize: '0',
          pageType: '1',
          year: new Date(this.datePicker).getFullYear(),
          bodyUrl: info.bodyUrl,
          filterList
        };

        getTableInfo(bodyRequest, 'data').then(res => {
          if (res.total === 0) {
            this.tableData = [];
          } else {
            this.tableData = res.data;
          }
          this.tableLoading = false;
        });
      },
      () => {
        this.tableLoading = false;
      });
    }

  }
};
</script>

<style lang="scss" scoped>
  .dialog-container {
    height: calc(85vh);
    position: relative;
  }

  .table-content {
    height: calc(100% - 54px);
  }

  /deep/ .el-dialog {
      margin-top: calc(2vh) !important;
  }
</style>
